<template>
  <div class='msg-board-main'>
    <div class='msg-board-content'>
      <div class='board'>
        <VueXiaoerDragEle
            v-for="(item,index) in msgList"
            :key='index'
            :parent='true'
            :resizable='false'
            :x='xyArr[index][0]||0'
            :y='xyArr[index][1]||0'
            :w='180'
            :h='150'
            class="drag-able-ele"
            :style="`background:url(${imgUrlArr[index%5]});background-size: 100% 100%;`"
        >
          <div class='msg-content'>
            <div
                class='msg-content-time'
                :style="`color:${item.nameColor||'#333'}`"
            >
              <div>第{{ item.id }}条</div>
              <div>{{ item.ctTime }}</div>
            </div>
            <div
                class='msg-content-content'
                :title='item.content'
                :style="`color:${item.contentColor||'#000'}`"
            >{{ item.content }}
            </div>
            <div
                class='msg-content-name'
                :title='item.name'
                :style="`color:${item.nameColor||'#000'}`"
            >{{ item.name }}
            </div>
          </div>
        </VueXiaoerDragEle>
      </div>

      <!--分页组件-->
      <div v-if="pageShow" class="home-page">
        <el-pagination :current-page=currentPage
                       :page-size=pageSize
                       :total="total"
                       background
                       layout="total, prev, pager, next"
                       @current-change=getMsgList>
        </el-pagination>
      </div>

      <div class='msg-board-event'>
        <div class='msg-board-require'>
          内容：
          <el-input type="textarea"
                    placeholder="请输入留言内容"
                    v-model='content'
                    class='msg-board-input'
                    maxlength="100"
                    show-word-limit
          ></el-input>
          <el-color-picker v-model="color2"></el-color-picker>
        </div>
          <div class='msg-board-require'>
              署名：
              <el-input
                      v-model='name'
                      placeholder="请输入昵称或姓名"
                      class='msg-board-input'
              ></el-input>
              <el-color-picker v-model="color1"></el-color-picker>
          </div>
        <div>
          <h7 style="background-color: white;">邮箱（选填）</h7>
          <el-input
              placeholder="邮箱或其他联系方式"
              v-model='email'
              class='msg-board-input'
          ></el-input>
        </div>

        <el-button
            type='primary'
            @click='seaveMsg'
        >留言
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import VueXiaoerDragEle from '@/components/guestbook/VueXiaoerDragEle'
import '@/components/guestbook/VueXiaoerDragEle.css'
import imgUrl1 from '@/assets/guestbook/icon-paper1.png'
import imgUrl2 from '@/assets/guestbook/icon-paper2.png'
import imgUrl3 from '@/assets/guestbook/icon-paper3.png'
import imgUrl4 from '@/assets/guestbook/icon-paper4.png'
import imgUrl5 from '@/assets/guestbook/icon-paper5.png'

export default {
  name: 'MessageBoard',
  components: {VueXiaoerDragEle},
  data() {
    return {
      msgList: [],
      content: '',
      name: '',
      email: '',
      xyArr: [],
      color1: '#000000',
      color2: '#000000',
      imgUrlArr: [imgUrl1, imgUrl2, imgUrl3, imgUrl4, imgUrl5],
      msgShowList11: [],
      colorArr: [],
      currentPage: 1,
      total: 0,
      pageSize: 5,
      pageShow: 1,
    }
  },
  computed: {},
  created() {
    //需要先执行一下，防止空取值
    setTimeout(() => {
      this.getXY()
    }, 580)
    this.getMsgList(1)
  },
  methods: {
    // 刷新当前页面
    reload() {
      window.history.go(0)
    },
    // 获取颜色随机定义
    getColor() {
      let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
      this.color1 = `#${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}`
      this.color2 = `#${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}${arr[Math.round(Math.random() * 15)]}`
    },
    // 获取横纵坐标
    getXY() {
      console.log("执行获取坐标")
      this.xyArr = this.msgList.map(() => {
        return [
          Math.round(Math.random() * 700),
          Math.round(Math.random() * 300)
        ]
      })
    },
    // 留言
    seaveMsg() {
      if (!this.name) {
        Message.warning('昵称不能为空')
        return false
      }
      if (!this.content) {
        Message.warning('留言内容不能为空')
        return false
      }
      if (this.content.length > 100) {
        Message.warning('亲，内容暂不支持过长呢！')
        return false
      }
      if (this.name.length > 10) {
        Message.warning('亲，昵称长度不能过长呢！')
        return false
      }
      this.saveGuestMsg({
        name: this.name,
        content: this.content,
        email: this.email,
        nameColor: this.color1,
        contentColor: this.color2
      })
    },

    /*获取留言列表-后端获取*/
    getMsgList(currentPage) {
      // this.msgList=null
      this.$axios.get('/msgBoard/getAllMessage?pageSize=12&currentPage=' + currentPage).then((res) => {
        this.msgList = res.data.data.records
        this.currentPage = res.data.data.current
        this.total = res.data.data.total
        this.pageSize = res.data.data.size
        this.pageShow = 1
      })
      this.getXY()
      this.getColor()
    },


    saveGuestMsg(obj) {
      const _this = this
      this.$axios.post('/msgBoard/msgCreate', obj).then(res => {
        console.log(res)
        this.$alert(res.data.msg, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            location.reload();
            _this.$router.go(0);
          }
        });
      })
      // _this.$router.push("/messageBoard")
      // this.getMsgList(1)
    },
  }
}
</script>

<style scoped>
a {
  color: #42b983;
}

.msg-board-title {
  cursor: pointer;
  background: linear-gradient(
      270deg,
      rgba(0, 175, 255, 1) 0%,
      rgba(22, 219, 238, 1) 30%,
      rgba(0, 6, 255, 1) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.msg-board-main {
  height: 100%;
  width: 100%;
  margin-right: 100px;
  display: flex;
  justify-content: center;
}

.msg-board-event {
  /* margin: 20px 0; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.msg-board-input {
  width: 200px;
}

.drag-able-ele {
  background: url('../../assets/guestbook/icon-yellow.png');
  background-size: 100% 100%;
}

.msg-board-content {
  width: 180%;
}

.board {
  height: 500px;
  width: 100%;
}

.board {
  /*background: url('../../assets/guestbook/icon-bg2.png');*/
  background: url('../../assets/guestbook/writewall.jpg');
  background-size: 100% 100%;
  border-radius: 2px;
}

.msg-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 12px;
  height: 85%;
  margin-top: 15px;
}

.msg-content-time {
  width: 100%;
  font-size: 6px;
  height: 30%;
  color: #333;
}

.msg-content-content {
  width: 100%;
  font-size: 10px;
  min-height: 57%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-all;
  break-word: keep-all;
  font-family: Cursive;
  margin-left: 10px;
  font-size: medium;
}

.msg-pagination {
  /*margin: 5px 0;*/
  margin-left: 200px;
  /*align-items: center;*/
}

.msg-content-name {
  height: 20%;
  width: 100%;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  font-weight: 600;
  overflow: hidden;
}

.msg-board-require {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.msg-board-require::before {
  content: '*';
  color: red;
}

.home-page {
  text-align: center;
}
</style>
